<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://yui.yahooapis.com/3.5.0pr1/build/yui/yui-min.js"></script>
<script type="text/javascript">

YUI().use('base','node','event','event-custom', function(Y) {
	
	function ContactView(){
		this.template = '<li>{name}</li>';
		this.render = function(e){
			return Y.Lang.sub(this.template,e.contact);
		};
	}
	
	//这是最便利的生产具备YUI基础设施的类的方法，这样生产出来的类具有attribute，eventTarget等特性，让你的类
	//变得像Node一样，可以产生和监听事件。这个联系人列表对象，当有对象加入时，会发出contact:add事件，所有监听这个事件的代码都会得到执行。
	var ContactList = Y.ContactList = Y.Base.create('contactList',Y.Base,[],{
		list : [],
	    add : function (contact) {
	        // This will fire with an event facade because Y.Base sets emitFacade to true
	        this.list.push(contact);
	        Y.log('fired!');
	        this.fire('contact:add', { contact: contact });
	    }
	},{});
	
	var cl = new ContactList(
			{after:
				{'init':function(e){
					Y.log(e);
					this.publish('contact:add', {emitFacade: true});
				}
			}
		});
	
	cl.on('contact:add',function(e){//这里的this就是cl
		var cv = new ContactView();
		Y.log(e);
		Y.one('#contactContainer').append(cv.render(e));
	});
	
	cl.on('contact:add',function(e){//这里的this就是cl
		Y.one('#count').setContent(this.list.length);
	});
	
	var f = Y.one('input');
	Y.on('click',function(e){
		cl.add({name:f.get('value')});
		f.set('value','');
	},'#addBt');

});

</script>
</head>
<body>
<ul id="contactContainer"></ul>
<form action="#">
	<input type="text" name="cname"/>
</form>
<button id="addBt">添加</button>
<div id="count"></div>
</body>
</html>